<template>
	<view>
		<view class="wrap">
			<!-- 授课老师组件 -->
			<view>
				<view class="title" id="scroll-hook-0"><text>授课老师</text></view>
				<scroll-view scroll-x="true" class="scroll-wrap">
					<view class="item" :class="{'first-item':!i}" v-for="(item,i) in teachers" :key="i" style="width: 100%;"><v-lesson-teacher :item="item" :disableUrl="true"></v-lesson-teacher></view>
				</scroll-view>
			</view>
			
			<!-- 课程大纲组件 -->
			<view>
				<view class="title" id="scroll-hook-1"><text>课程大纲</text></view>
				<view class="outline-wrap" v-if="outlines.length > 0">
					<view class="item" v-for="(item,i) in outlines" :key="i" :class="{'last-item': (outlines_no_more || comments.length < 4) && (i == outlines.length-1)}"><v-lesson-outline :item="item"></v-lesson-outline></view>
					<view v-if="!outlines_no_more" @click="moreOutline"><v-btn-more-auto></v-btn-more-auto></view>
				</view>
				<view class="no-item-wrap" v-else>
					<text>暂无大纲~</text>
				</view>
			</view>
			
			<!-- 课程评价组件 -->
			<view>
				<view class="title" id="scroll-hook-2"><text>课程评价</text></view>
				<view class="discuss-wrap" v-if="comments.length > 0">
					<view v-for="(item,i) in comments" :key="i"><v-discuss class="item" :item="item" :class="{'last-item': (comments_no_more || comments.length < 4) && (i == comments.length-1)}"></v-discuss></view>
					<view v-if="!comments_no_more && comments.length>3" @click="moreComment"><v-btn-more-auto></v-btn-more-auto></view>						
				</view>
				<view class="no-item-wrap" v-else>
					<text>暂无评价~</text>
				</view>
			</view>
			
			<!-- 课程详情组件 -->
			<view>
				<view class="title"><text>课程详情</text></view>
				<view class="introduce-wrap">
					<view class="item" v-for="(item,i) in details" :key="i"><v-lesson-introduce :item="item"></v-lesson-introduce></view>
				</view>
			</view>
			
			<!-- 报课须知组件 -->
			<view>
				<view class="title" id="scroll-hook-3"><text>报课须知</text></view>
				<view class="introduce-wrap">
					<view class="item" v-for="(item,i) in instucts" :key="i"><v-lesson-introduce :item="item"></v-lesson-introduce></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lessonTeacher from './lesson-teacher'
	import lessonOutline from './lesson-outline'
	import discuss from './discuss'
	import lessonIntroduce from './lesson-introduce'
	import btnMoreAuto from './btn-more-auto'
	
	export default {
		data() {
			return {
				
			}
		},
		props: {
			teachers: Array,  // 教师列表
			outlines: Array,  // 课程大纲列表
			comments: Array,  // 评价列表
			details: Array,  // 详情列表
			instucts: Array,  // 报课须知列表
			outlines_no_more: Boolean,
			comments_no_more: Boolean
		},
		components: {
			vLessonTeacher: lessonTeacher,
			vLessonOutline: lessonOutline,
			vDiscuss: discuss,
			vLessonIntroduce: lessonIntroduce,
			vBtnMoreAuto: btnMoreAuto
		},
		methods: {
			moreComment(){
				this.$emit("moreComment")
			},
			moreOutline(){
				this.$emit('moreOutline')
			}
		}
	}
</script>

<style scoped>
	.wrap{padding: 0 32upx 32upx; background: #FAFAFA; border-top: 2upx solid #fff;}
	.no-item-wrap{text-align: center; font-size: 30upx; color: #C4C4C4; line-height: 80upx; height: 80upx;background: #FFF;}
	
	.title{margin:20upx 0;}
	.title text{padding-left:16upx; border-left:4upx solid #fe9900; font-size:34upx; font-weight:bold; color:#333; letter-spacing: 2upx; vertical-align: middle;}
	
	.scroll-wrap{white-space:nowrap; width:100%;}
	.scroll-wrap .item{display:inline-block; margin-left:20upx; border-radius:20upx; background:#fff;}
	.scroll-wrap .first-item{display:inline-block; margin-left: 0; border-radius:20upx; background:#fff;}
	
	.outline-wrap{border-radius:20upx; background:#fff; overflow: hidden;}
	.outline-wrap .item{border-bottom: 2upx solid #E5E5E5;}
	
	.discuss-wrap{border-radius:20upx; background:#fff; overflow: hidden;}
	.discuss-wrap .item{border-bottom: 2upx solid #E5E5E5;}
	
	.introduce-wrap{border-radius:20upx; background:#fff; overflow: hidden;}
	.introduce-wrap .item{border-bottom: 2upx solid #E5E5E5;}
	
	.introduce-wrap .item:last-child{border-bottom:none;}
	
	.last-item{border-bottom: none !important;}
</style>
